<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>残疾人列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="searchFrom" class="user-search">
      <el-form-item label="姓名">
        <el-input
          size="small"
          v-model="searchFrom.disabilityName"
          clearable
          placeholder="残疾人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="户籍地">
        <el-cascader
          size="small"
          :options="options2"
          clearable
          v-model="selectedOptions1"
          @change="searchHandleChange"
          ref="searchSS"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="户口性质">
        <el-select
          size="small"
          clearable
          v-model="searchFrom.houseCadastralNature"
          placeholder="请选择户口性质"
        >
          <el-option label="农业" value="1"></el-option>
          <el-option label="非农业" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="残疾类型" prop="disabilityType">
        <el-select
          size="small"
          v-model="searchFrom.disabilityType"
          clearable
          placeholder="请选择残疾类型"
        >
          <el-option
            v-for="type in disabilityTypeArr"
            :label="type.label"
            :value="type.value"
            :key="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="残疾等级" prop="disabilityLevel">
        <el-select
          size="small"
          v-model="searchFrom.disabilityLevel"
          clearable
          placeholder="请选择残疾类型"
        >
          <el-option
            v-for="type in disabilityLevelArr"
            :label="type.label"
            :value="type.value"
            :key="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="残疾人状态" prop="status">
        <el-select
          size="small"
          v-model="searchFrom.status"
          clearable
          placeholder="请选择残疾人状态"
        >
          <el-option label="挂靠中" value="1"></el-option>
          <el-option label="未挂靠" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工资卡银行" prop="salaryBank">
        <el-select
          size="small"
          v-model="searchFrom.salaryBank"
          clearable
          placeholder="请选择工资卡银行"
        >
          <el-option
            v-for="type in bankArr"
            :label="type.label"
            :value="type.value"
            :key="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="挂靠地区">
        <el-cascader
          size="small"
          :options="options2"
          v-model="selectedOptions2"
          clearable
          @change="gkHandleChange"
          ref="guakaoSS"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="所属代理人">
        <el-select
          size="small"
          v-model="searchFrom.agentId"
          clearable
          placeholder="请选择所属代理人"
        >
          <!-- <el-option  label="农业" value="1"></el-option> -->
          <el-option
            v-for="type in agentIdArr"
            :label="type.agentName"
            :value="type.agentId"
            :key="type.agentId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="挂靠时间">
        <el-date-picker
          size="small"
          v-model="searchDateValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="searchDate"
          :value-format="'yyyy-MM-dd'"
          clearable
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-tickets"
          @click="exportExcel"
          >导出</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleEdit()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      
      <el-table-column sortable prop="disabilityVo.disabilityName" label="姓名" width="100"></el-table-column>
      <el-table-column sortable prop="disabilityVo.agentName" label="代理人"></el-table-column>
      <el-table-column sortable prop="disabilityVo.status" label="挂靠状态">
        <template slot-scope="scope">
          <div>{{ scope.row.disabilityVo.status == 1 ? "挂靠中" : "未挂靠" }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="disabilityVo.orderId" label="挂靠订单编号"></el-table-column>
      <el-table-column sortable prop="disabilityVo.affiliatedStartDate" label="挂靠开始时间"></el-table-column>
      <el-table-column sortable prop="disabilityVo.affiliatedEndDate" label="挂靠结束时间"></el-table-column>
      <el-table-column sortable prop="" label="挂靠城市">
        <template slot-scope="scope">
          <div>{{ scope.row.disabilityVo.status == 1 ? (scope.row.disabilityVo.affiliatedProvinceTxt   + "/" + scope.row.disabilityVo.affiliatedCityTxt) : '' }}</div>
        </template>
      </el-table-column>

      <el-table-column sortable prop="" label="户籍">
        <template slot-scope="scope">
          <div>{{ scope.row.disabilityVo.houseProvinceTxt +"/" + scope.row.disabilityVo.houseCityTxt }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="disabilityVo.sex" label="性别" width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.disabilityVo.sex == 0 ? "男":"女" }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="disabilityVo.age" label="年龄" width="100"></el-table-column>
      <el-table-column
        sortable
        prop="houseCadastralNature"
        label="户口性质"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.disabilityVo.houseCadastralNature == 1 ? "农业":"非农业" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="disabilityType"
        label="残疾类型"
      >
        <template slot-scope="scope">
          <div>{{ typeToString(scope.row.disabilityVo.disabilityType)  }}</div>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="disabilityLevel"
        label="残疾等级"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ (scope.row.disabilityVo.disabilityLevel) + "级" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="disabilityVo.releaseDate"
        label="发证日期"
        width="100"
      ></el-table-column>

      <!-- <el-table-column
        sortable
        prop="disabilityEntity.idCard"
        label="身份证号"
      ></el-table-column>
      <el-table-column sortable prop="disabilityEntity.address" label="住址"></el-table-column>
      <el-table-column
        sortable
        prop="disabilityEntity.contact"
        label="联系方式"
      ></el-table-column>
      <el-table-column
        sortable
        prop="disabilityEntity.disabilityNum"
        label="残疾证号"
      ></el-table-column>
      <el-table-column
        sortable
        prop="disabilityEntity.remark"
        label="备注"
      ></el-table-column> -->
      <el-table-column align="center" label="操作" width="80">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="570px"
      top="2vh"
      :close-on-click-modal="false"
      @click="closeDialog"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form
            label-width="120px"
            :model="editForm"
            :rules="rules"
            ref="editForm"
          >
            <el-form-item label="姓名" prop="disabilityName">
              <el-input
                size="small"
                v-model="editForm.disabilityName"
                auto-complete="off"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input
                size="small"
                v-model="editForm.idCard"
                auto-complete="off"
                placeholder="请输入身份证号"
                @change="computerAgeAndSex"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select
                size="small"
                v-model="editForm.sex"
                placeholder="请选择性别"
              >
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input
                size="small"
                disabled
                v-model="editForm.age"
                auto-complete="off"
                placeholder="根据身份证计算，不可手动输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="户籍地" prop="">
              <el-cascader
                size="small"
                :options="options"
                v-model="selectedOptions3"
                @change="handleChange"
                ref="shengshi"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="户口性质" prop="houseCadastralNature">
              <el-select
                size="small"
                v-model="editForm.houseCadastralNature"
                placeholder="请选择户口性质"
              >
                <el-option label="农业" value="1"></el-option>
                <el-option label="非农业" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="住址" prop="address">
              <el-input
                size="small"
                v-model="editForm.address"
                auto-complete="off"
                placeholder="请输入住址"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="contact">
              <el-input
                size="small"
                v-model="editForm.contact"
                auto-complete="off"
                placeholder="请输入联系方式(手机号)"
              ></el-input>
            </el-form-item>
            <el-form-item label="残疾类型" prop="disabilityType">
              <el-select
                size="small"
                
                v-model="editForm.disabilityType"
                placeholder="请选择残疾类型"
              >
                <el-option
                  v-for="type in disabilityTypeArr"
                  :label="type.label"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="残疾等级" prop="disabilityLevel">
              <el-select
                size="small"
                v-model="editForm.disabilityLevel"
                placeholder="请选择残疾等级"
              >
                <el-option
                  v-for="type in disabilityLevelArr"
                  :label="type.label"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发证日期" prop="releaseDate">
              <el-date-picker
                v-model="editForm.releaseDate"
                type="date"
                size="small"
                placeholder="请选择发证日期(十年之内)"
                value-format="yyyy-MM-dd"
                :picker-options="pickerBeginDateBefore"
                @change="releaseDateChange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="代理人" prop="agentId">
              <el-select
                size="small"
                v-model="editForm.agentId"
                placeholder="请选择所属代理人"
              >
                <el-option
                  v-for="type in agentIdArr"
                  :label="type.agentName"
                  :value="type.agentId"
                  :key="type.agentId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="残疾证号" prop="disabilityNum">
              <el-input
                size="small"
                v-model="editForm.disabilityNum"
                auto-complete="off"
                placeholder="请输入残疾证号(20位)"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="残疾人状态" prop="status">
              <el-select
                size="small"
                v-model="editForm.status"
                placeholder="请选择残疾人状态"
              >
                <el-option label="挂靠中" value="1"></el-option>
                <el-option label="未挂靠" value="2"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="工资卡银行" prop="salaryBank">
              <el-select
                size="small"
                v-model="editForm.salaryBank"
                placeholder="请选择工资卡银行"
              >
                <el-option
                  v-for="type in bankArr"
                  :label="type.label"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开户行" prop="bank">
              <el-input
                size="small"
                v-model="editForm.bank"
                auto-complete="off"
                placeholder="请输入开户行"
              ></el-input>
            </el-form-item>
            <el-form-item label="银行卡号" prop="bankNo">
              <el-input
                size="small"
                v-model="editForm.bankNo"
                auto-complete="off"
                placeholder="请输入银行卡号"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                size="small"
                v-model="editForm.remark"
                auto-complete="off"
                placeholder="请输入备注信息"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="证件信息" name="second">
          <el-form
            label-width="120px"
            :model="editForm"
            :rules="rules"
            ref="editForm"
          >
            <el-form-item label="残疾证" prop="disName">
              <el-upload
                action="http://39.105.131.187:8011/api/common/uploadPic"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="uploadArr1"
                :on-success="imgUploadSuccess1"
                :beforeUpload="beforeUpload"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF"
                ref="upload1"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file, 1)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="身份证" prop="disName">
              <el-upload
                action="http://39.105.131.187:8011/api/common/uploadPic"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="uploadArr2"
                :on-success="imgUploadSuccess2"
                :beforeUpload="beforeUpload"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF"
                ref="upload2"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file, 2)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="户口页" prop="disName">
              <el-upload
                action="http://39.105.131.187:8011/api/common/uploadPic"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="uploadArr3"
                :on-success="imgUploadSuccess3"
                :beforeUpload="beforeUpload"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF"
                ref="upload3"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span> -->
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file, 3)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="工资卡" prop="disName">
              <el-upload
                action="http://39.105.131.187:8011/api/common/uploadPic"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="uploadArr4"
                :on-success="imgUploadSuccess4"
                :beforeUpload="beforeUpload"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF"
                ref="upload4"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span> -->
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file, 4)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="本人证件照片" prop="disName">
              <el-upload
                action="http://39.105.131.187:8011/api/common/uploadPic"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="uploadArr5"
                :on-success="imgUploadSuccess5"
                :beforeUpload="beforeUpload"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF"
                ref="upload5"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file, 5)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="社保卡" prop="disName">
              <el-upload
                action="http://39.105.131.187:8011/api/common/uploadPic"
                list-type="picture-card"
                :auto-upload="true"
                :file-list="uploadArr6"
                :on-success="imgUploadSuccess6"
                :beforeUpload="beforeUpload"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF"
                ref="upload6"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file, 6)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import { getDisabledList, disabledSave, disabledUpdata, getAgentList, exportExcelP, getBankArr } from "../../api/userMG";
import Pagination from "../../components/Pagination";
import * as imageConversion from 'image-conversion'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      uploadArr1:[],
      uploadArr2:[],
      uploadArr3:[],
      uploadArr4:[],
      uploadArr5:[],
      uploadArr6:[],
      editForm: {
        disabilityId:"", // 编辑使用的id
        disabilityName: "", // 姓名
        idCard: "", // 身份证号
        sex: "", // 0:男 1：女
        age: "", // 年龄
        houseProvinceId: "", // 户籍省id
        houseProvinceTxt: "", // 户籍省描述
        houseCityId: "", // 户籍市id
        houseCityTxt: "", // 户籍市描述
        houseCadastralNature: "", // 户籍性质 1：农业 2：非农业
        address: "", // 住址
        contact: "", // 联系方式
        disabilityType: "", // 残疾类型 1：肢体 2：智力 3：精神 4：视力 5：言语 6：听力 7：多重
        disabilityLevel: "", // 残疾证等级 1:1级 2：2级 3：3级 4：4级
        releaseDate: "", // 发证日期，在录入的时候如果发证日期距离今天超过10年自动清空
        agentId: "", // 代理人Id
        disabilityNum: "", // 残疾证号
        status: "", // 残疾人状态 1：挂靠中 2：未挂靠
        salaryBank: "", // 工资卡银行
        bank: "", // 开户行地址
        bankNo: "", // 银行卡号
        remark:"", // 备注信息
        disabilityPicList: [], // 图片的地址
      },
      searchFrom: {
        disabilityName: "", // 姓名
        houseProvinceId: "", // 户籍省Id
        houseCityId: "", // 户籍市Id
        houseCadastralNature: "", //户籍性质 1：农业 2：非农业
        disabilityType: "", // 残疾类型 1肢体、2智力、3精神、4视力、5言语、6听力、7多重,
        disabilityLevel: "", //"残疾证等级", （1：1级 2：2级 3：3级 4：4级）
        status: "", // 挂靠状态 1：挂靠中  2：无挂靠,
        salaryBank: "", // 工资卡银行
        affiliatedProvinceId: "", // 挂靠省Id
        affiliatedCityId: "", // 挂靠城市Id
        agentId: "", // 代理ID
        startDate: "", // 挂靠结束时间
        endDate: "", // 挂靠开始时间,
        pageNum: "1", // 页数
        pageSize: "10", // 行数
      },
      searchDateValue:"", // 挂靠日期
      options: provinceAndCityData, // 备选的地区
      options2: [], // 备选的地区
      selectedOptions1: [], // 选中的地区
      selectedOptions2: [], // 选中的地区
      selectedOptions3: [], // 选中的地区
      // rules表单验证
      rules: {
        // disabilityName: [{ required: true, message: "", trigger: "blur" }],
        // idCard: [{ required: true, message: "", trigger: "blur" }],
      },
      // 删除部门
      seletedata: {
        ids: "",
        token: localStorage.getItem("logintoken"),
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      // 残疾类型
      disabilityTypeArr: [
        {
          value: "1",
          label: "肢体",
        },
        {
          value: "2",
          label: "智力",
        },
        {
          value: "3",
          label: "精神",
        },
        {
          value: "4",
          label: "视力",
        },
        {
          value: "5",
          label: "语言",
        },
        {
          value: "6",
          label: "听力",
        },
        {
          value: "7",
          label: "多重",
        },
      ],
      // 残疾等级
      disabilityLevelArr: [
        {
          value: "1",
          label: "1级",
        },
        {
          value: "2",
          label: "2级",
        },
        {
          value: "3",
          label: "3级",
        },
        {
          value: "4",
          label: "4级",
        },
      ],
      // 代理人数组
      agentIdArr: [],
      // 客户 数组
      customerIdArr:[],
      // 常见的银行
      bankArr: [
        // {
        //   value: "中国工商银行",
        //   label: "中国工商银行",
        // }
        
      ],
      // 切换表头
      activeName: "first",
      // 图片相关的参数
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      pickerBeginDateBefore: {
        disabledDate(time) {
          return time.getTime() >= Date.now() - 8.64e7;
        },
      },
      // 身份证照片
      attachmentList: [],
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  watch:{
    // selectedOptions1:function(val){
    // }
  },

  /**
   * 数据发生改变
   */
  mounted() {
    // console.log(this.options2);
    var optionClone = JSON.parse(JSON.stringify(provinceAndCityData))
    optionClone.map(item=>{
      this.options2.push({
        label: item.label,
        value: item.value
      })
    })

    provinceAndCityData[0].children = regionData[0].children[0].children; // 北京市
    provinceAndCityData[1].children = regionData[1].children[0].children; // 天津市
    provinceAndCityData[8].children = regionData[8].children[0].children; // 上海市
    provinceAndCityData[21].children = regionData[21].children[0].children; // 重庆市
    regionData[21].children[1].children.map((item) => {
      provinceAndCityData[21].children.push(item);
    });
  },
  /**
   * 创建完毕
   */
  created() {
    // 获取所有的代理，用于添加残疾人的下拉框
    this.getAgentArr();
    // 获取常见的银行信息
    this.getBank();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取常见的银行列表
    getBank(){
      getBankArr().then(res=>{
        if(res.status == 200){
          this.bankArr = [];
          res.data.map(item=>{
            this.bankArr.push({
              label:item.bankName,
              value:item.bankName
            })
          })
        }else{
          this.$message.error("获取银行列表失败");
        }
      }).catch(res=>{
        this.$message.error("获取银行列表失败");
        console.log(res);
      })
    },
    // 导出Excel
    exportExcel(){
      // console.log(this.searchFrom);
      exportExcelP(this.searchFrom).then(res=>{
          // 生成地址，形如图 2
          var url = window.URL.createObjectURL(new Blob([res], { type: '.xlsx' }))
          // 创建标签a
          let a= document.createElement('a')
          // 设置隐藏
          a.style.display = 'none'
          // 给a标签地址
          a.href = url
          // 设置属性download和值，这是个特殊属性，参照图 3
          a.setAttribute('download', `残疾人列表.xlsx`)
          // 把a标签放入body，创建后的 a 标签，形如图 4
          document.body.appendChild(a)
          // 调用手动点击事件，相当于你做了一次点击
          a.click()
          // 释放该文件引用地址(也可以 url = undefined，如果你下载多个文件，这一步对性能优化尤为重要)
          // url = window.URL.revokeObjectURL(url)
          // 移除a标签
          document.body.removeChild(a)
      })
    },
    // 上传前压缩
    beforeUpload(file){
      return new Promise((resolve, reject) => {
        // console.log('压缩前', file) // 压缩到400KB,这里的400就是要压缩的大小,可自定义
        imageConversion.compressAccurately(file, 500).then(res => { // console.log(res)
          res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
          // console.log('压缩后', res);
          resolve(res)
        })
      })
    },
    // 残疾类型，从id改成字符串
    typeToString(val){
      var str = "";
      this.disabilityTypeArr.map(item=>{
        if(val == item.value){
          str = item.label;
        }
      })
      return str;
    },
    // 代理人，从id改成字符转
    agentIdToString(val){
      var str = "";
      this.agentIdArr.map(item=>{
        if(val == item.agentId){
          str = item.agentName;
        }
      })
      return str;
    },
    // 图片上传成功之后
    imgUploadSuccess1(response, file, fileList) {
      this.imgUploadSuccess(response, file, fileList, 1);
    },
    imgUploadSuccess2(response, file, fileList) {
      this.imgUploadSuccess(response, file, fileList, 2);
    },
    imgUploadSuccess3(response, file, fileList) {
      this.imgUploadSuccess(response, file, fileList, 3);
    },
    imgUploadSuccess4(response, file, fileList) {
      this.imgUploadSuccess(response, file, fileList, 4);
    },
    imgUploadSuccess5(response, file, fileList) {
      this.imgUploadSuccess(response, file, fileList, 5);
    },
    imgUploadSuccess6(response, file, fileList) {
      this.imgUploadSuccess(response, file, fileList, 6);
    },
    imgUploadSuccess(response, file, fileList, type) {
      this.editForm.disabilityPicList.push({
        disabilityPicUrl: response.data,
        disabilityPicType: type,
      });
    },
    handleClick() {},
    // 地区选择完成之后
    handleChange() {
      var checkNode = this.$refs.shengshi.getCheckedNodes();
      this.editForm.houseProvinceId = checkNode[0].parent.value; // 户籍省id
      this.editForm.houseProvinceTxt = checkNode[0].parent.label; // 户籍省描述
      this.editForm.houseCityId = checkNode[0].value; // 户籍市id
      this.editForm.houseCityTxt = checkNode[0].label; // 户籍市描述
      // console.log(this.selectedOptions3);
    },
    // 
    searchHandleChange(){
      var checkNode = this.$refs.searchSS.getCheckedNodes();
      // console.log(checkNode);
      
      if(checkNode.length == 0){
        this.searchFrom.houseProvinceId = ""; // 户籍省id
        // this.searchFrom.houseCityId = ""; // 户籍市id
      }else{
        this.searchFrom.houseProvinceId = checkNode[0].value; // 户籍省id
        // this.searchFrom.houseCityId = checkNode[0].value; // 户籍市id
      }
    },
    gkHandleChange(){
      var checkNode = this.$refs.guakaoSS.getCheckedNodes();
      if(checkNode.length == 0){
        this.searchFrom.affiliatedProvinceId = ""; // 户籍省id
        // this.searchFrom.affiliatedCityId = ""; // 户籍市id
      }else{
        this.searchFrom.affiliatedProvinceId = checkNode[0].value; // 户籍省id
        // this.searchFrom.affiliatedCityId = checkNode[0].value; // 户籍市id
      }
    },
    // 图片相关的方法
    handleRemove(file, type) {
      // console.log(file, type);
      // 删除图片
      this.editForm.disabilityPicList.map((item, i) => {
        if (file.response && item.disabilityPicUrl == file.response.data) {
          this.editForm.disabilityPicList.splice(i, 1);
        }
        if (file.url && item.disabilityPicUrl == file.url) {
          this.editForm.disabilityPicList.splice(i, 1);
        }
      });

      let fileList = this.$refs["upload" + type].uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
    },

    // 查看照片
    handlePictureCardPreview(file) {
      window.open(file.url);
    },
    handleDownload(file) {
      window.open(file);
    },
    // 
    searchDate(){
      if(this.searchDateValue){
        this.searchFrom.startDate = this.searchDateValue[0];
        this.searchFrom.endDate = this.searchDateValue[1];
      }else{
        this.searchFrom.startDate = "";
        this.searchFrom.endDate = "";
      }
    },
    // 获取公司列表
    getdata(parameter) {
      this.loading = true;
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      getDisabledList(parameter)
        .then((res) => {
          this.loading = false;
          if (res.status != 200) {
            this.$message({
              type: "info",
              message: res.msg,
            });
          } else {
            this.listData = res.data.list;
            // 分页赋值
            this.pageparm.currentPage = Number(this.searchFrom.pageNum);
            this.pageparm.pageSize = Number(this.searchFrom.pageSize);
            this.pageparm.total = Number(res.data.total);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("数据加载失败，请稍后再试！");
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.searchFrom.pageNum = parm.currentPage;
      this.searchFrom.pageSize = parm.pageSize;
      this.getdata(this.searchFrom);
    },
    // 搜索事件
    search() {
      this.searchFrom.pageNum = 1;
      this.getdata(this.searchFrom);
    },
    uploadArr:function(index,val){
      if(index == 1){
        this.uploadArr1.push(val)
      }else if(index == 2){
        this.uploadArr2.push(val)
      }else if(index == 3){
        this.uploadArr3.push(val)
      }else if(index == 4){
        this.uploadArr4.push(val)
      }else if(index == 5){
        this.uploadArr5.push(val)
      }else if(index == 6){
        this.uploadArr6.push(val)
      }
      
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      console.log(index, row)
      if(index != undefined){ // 编辑
        this.title = "编辑";
        for(var i in this.editForm){
          if(i!="disabilityPicList"){ // 普通信息
            // console.log("进入普通信息：")

            if(i in row["disabilityVo"]){
              if(i == "status"){ // status 是字符转类型这个需要改一下
                this.editForm[i] = String(row["disabilityVo"][i]);
              }else{
                this.editForm[i] = row["disabilityVo"][i];
              }
            }
            // console.log(this.editForm);
          }else{ // 图片信息
            this.editForm[i] = row.disabilityPicList;
            this.uploadArr1 = [];
            this.uploadArr2 = [];
            this.uploadArr3 = [];
            this.uploadArr4 = [];
            this.uploadArr5 = [];
            this.uploadArr6 = [];
            row.disabilityPicList.map(item=>{
              var index1 = item.disabilityPicType;
              this.uploadArr(index1,{
                name:item.disabilityPicId,
                url:item.disabilityPicUrl
              })
            })
          }
        }
        // 设置好省市
        var sheng = row.disabilityVo.houseProvinceId;
        var shi = row.disabilityVo.houseCityId;
        this.selectedOptions3 = [];
        this.selectedOptions3.push(sheng);
        this.selectedOptions3.push(shi);
        this.editFormVisible = true;
      }else{ // 新增
        this.title = "添加";
        for(var i in this.editForm){
          if(i != "disabilityPicList"){
            this.editForm[i] = "";
          }else{
            this.editForm[i] = [];
          }
        }
        this.selectedOptions3 = [];
        this.editFormVisible = true;
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          let postData = {};
          postData.disabilityPicList = this.editForm.disabilityPicList;
          var nowData = JSON.parse(JSON.stringify(this.editForm));
          delete nowData.disabilityPicList;
          postData.disabilityEntity = nowData;
          if(postData.disabilityPicList == ""){
            postData.disabilityPicList = [];
          }
          if(this.title == "添加"){
            disabledSave(postData)
            .then((res) => {
              this.editFormVisible = false;
              this.loading = false;
              if (res.status == "200") {
                // this.getdata(this.editForm);
                this.$message({
                  type: "success",
                  message: res.desc,
                });
                this.getdata(this.searchFrom);
                this.editFormEmpty();
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.loading = false;
              this.$message.error("接口调用失败，请稍后再试！");
            });
          }else{
            disabledUpdata(postData)
            .then((res) => {
              this.editFormVisible = false;
              this.loading = false;
              if (res.status == "200") {
                this.$message({
                  type: "success",
                  message: res.desc,
                });
                this.getdata(this.searchFrom);
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.editFormVisible = false;
              this.loading = false;
              this.$message.error("接口调用失败，请稍后再试！");
            });
          }
          
        } else {
          return false;
        }
      });
    },
    // 清空数据
    editFormEmpty(){
      for(var i in this.editForm){
        if(i != "disabilityPicList"){
          this.editForm[i] = [];
        }else{
          this.editForm[i] = "";
        }
      }
      this.uploadArr1 = [];
      this.uploadArr2 = [];
      this.uploadArr3 = [];
      this.uploadArr4 = [];
      this.uploadArr5 = [];
      this.uploadArr6 = [];
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
    // 通过身份证计算年龄和性别
    computerAgeAndSex() {
      //相当长而且比较复杂的身份证校验规则（亲测有用）
      let idcodeTest =
        /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
      //代码在@input方法中执行
      if (idcodeTest.test(this.editForm.idCard)) {
        //先进行校验，test括号里可忽略，以下全部简称“自有代码”
        //将获取到的证件号码转换一下以便得到长度判断是一代还是二代
        let idcode = this.editForm.idCard + ""; //累赘代码
        let newidcode = idcode.split("").map(Number); //累赘代码
        //其实直接取this.PKform.sfzhm的length就行
        if (newidcode.length == 15) {
          //15位身份证号
          // 年龄计算
          let nowYear = new Date().getFullYear(); //获取当前年份
          let nowMonth = new Date().getMonth(); //获取当前月份
          let idYear = Number(this.editForm.idCard.slice(6, 8)) + Number(1900); //获取身份证年份
          let idMonth = this.editForm.idCard.slice(8, 9); //获取身份证月份
          if (nowMonth - idMonth >= 0) {
            this.editForm.age = String(nowYear - idYear); //等号左边为自有代码，是承接容器，可忽略
          } else {
            this.editForm.age = String(nowYear - idYear - 1); //等号左边为自有代码，是承接容器，可忽略
          }
          //性别判断
          let sexCheck = this.editForm.idCard.slice(14, 15);
          if (sexCheck % 2 == 0) {
            this.editForm.sex = "1"; // 女
          } else {
            this.editForm.sex = "0"; // 男
          }
        } else if (newidcode.length == 18) {
          //18位身份证号
          // 年龄计算
          let nowYear = new Date().getFullYear(); //获取当前年份
          let nowMonth = new Date().getMonth(); //获取当前月份
          let idYear = this.editForm.idCard.slice(6, 10); //获取身份证年份
          let idMonth = this.editForm.idCard.slice(10, 11); //获取身份证月份
          if (nowMonth - idMonth >= 0) {
            this.editForm.age = String(nowYear - idYear);
          } else {
            this.editForm.age = String(nowYear - idYear - 1);
          }
          //性别判断
          let sexCheck = this.editForm.idCard.slice(16, 17);
          if (sexCheck % 2 == 0) {
            this.editForm.sex = "1"; // 女
          } else {
            this.editForm.sex = "0"; // 男
          }
        } else {
          //不满足条件则清空年龄与性别
          this.PKform.xbdm = "";
          this.PKform.xbmc = "";
          this.jsonData.xfrxbJson.val = "";
          this.jsonData.nlJson.val = "";
          this.editForm.age = "";
        }
      }
    },
    // 看日期是否超过了十年
    releaseDateChange() {
      var nowTime = new Date().getTime();
      var selectedTime = new Date(this.editForm.releaseDate).getTime();
      if (nowTime - selectedTime > 10 * 365 * 24 * 60 * 60 * 1000) {
        this.editForm.releaseDate = "";
        this.$message.error("请选择十年内的日期");
      }
    },
    // 获取所有的代理
    getAgentArr() {
      getAgentList().then((data) => {
        if (data.status == 200) {
          this.agentIdArr = data.data;
        } else {
          this.$message.error("获取代理的接口失败！");
        }
        this.getdata(this.searchFrom);
      });
    },
  },
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-cascader--small {
  width: 100%;
}
/deep/ .el-date-editor.el-input {
  width: 100%;
}
/deep/ .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/deep/ .el-upload--picture-card {
  width: 120px;
  height: 120px;
  line-height: 120px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  height: 120px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item div {
  width: 100%;
  height: 100%;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 